import React from 'react'
import { Button, Icon, message, Row, Upload } from 'antd'
import { FormattedMessage } from 'react-intl'

const ImportUserModal = ({callback}) => {
  const getHeaderFromLocalStorage = (key) => window.localStorage.getItem(key)
  const checkFileFormat = file => {
    return file.name.endsWith('.xlsx') || file.name.endsWith('.xls')
  }
  const action = `./api/users/import`

  const props = {
    name: 'file',
    action,
    headers: {
      id: 21,
      token: getHeaderFromLocalStorage('jwt'),
      sessionId: getHeaderFromLocalStorage('sessionId')
    },
    beforeUpload (file) {
      if (checkFileFormat(file)) {
        return true
      }
      message.error('error format')
      return false
    },
    onChange (info) {
      if (info.file.status === 'done') {
        callback('success', '导入成功')
      } else if (info.file.status === 'error') {
        callback('error', info.file.response.message)
      }
    }
  }
  return <Row type='flex' justify='start'>
    <Upload {...props}>
      <Button>
        <Icon type='upload' />
        Excel <FormattedMessage id='导入' />
      </Button>
    </Upload>

    <span style={{lineHeight: '30px', paddingLeft: 10}}>
      <a target='_blank' href={'https://tws-upload.s3.cn-north-1.amazonaws.com.cn/static-resources/importUserTemplate.xlsx'}>
        <FormattedMessage id='下载模版' />
      </a>
    </span>
  </Row>
}

export default ImportUserModal
